<template>
	<view class="content">
		<view class="fixed" @click="closeData">
		</view>
		<view class="child-system">
			<view class="controller">
				<view class="quit" @click="closeData">关闭</view><!-- <view class="reset" @click="resetData">重置</view> -->
				<view class="ok" @click="ok">确认</view>
				<u-search placeholder="" @change="changeValue" v-model="keyword" :show-action="false"></u-search>
			</view>
			<view class="item-list">
				<template v-show="people.length > 0">
					<u-radio-group :wrap="wrap"  v-model="checkedvalue" @change="checkboxGroupChange" shape='square'>
						<u-radio v-for="(item, index) in peopleList" :key="item.name"
							:name="item.name">{{ item.name }}</u-radio>
					</u-radio-group>
					<!-- <view class="item" v-for="(item, index) in people" :key="index">{{item.text}}</view> -->
				</template>
				<view v-show="people.length == 0" class="empty">无数据</view>
			</view>
		</view>
	</view>
</template>
<script>
	export default {
		props: ["people", "faultStatus", "peopleName"],
		data() {
			return {
				peopleList: [],
				wrap: true,
				keyword: "",
				copyPeople: [],
				setTimeoutID: '',
				checked:""
			};
		},
		watch: {
			people: {
				handler(news, olds) {
					if (this.peopleName) {
						this.name_list = this.peopleName.split(',');
						news.forEach((item) => {
							if (this.name_list.includes(item.name)) {
								// item.checked = true
								this.checkedvalue = item.name
							}
						});
					} else {
						news.forEach((item) => {
							item.checked = false
						});
						this.name_list = []
					}
					this.peopleList = JSON.parse(JSON.stringify(news))
					this.copyPeople = JSON.parse(JSON.stringify(news))
				},

				immediate: true

			}

		},
		methods: {
			changeValue(value) {
				clearTimeout(this.setTimeoutID)
				this.setTimeoutID = setTimeout(() => {
					console.log('value-value', value)
					if (value) {
						this.peopleList = []
						this.copyPeople.forEach(item => {
							if (item.name.indexOf(value) !== -1) {
								this.peopleList.push(item)
							}
						})
					} else {
						this.peopleList = this.copyPeople
					}
				}, 500)


			},
			closeData() {
				this.$emit("close");
			},
			checkboxGroupChange(e) {
				// console.log('e', e)
				// if (this.faultStatus && e.length <= this.faultStatus) {
					this.name_list = e;
				// }
			},
			ok() {
				let id = [];
				let name = []
				if (this.name_list.length) {
					this.people.map((item) => {
						if (this.name_list.includes(item.name)) {

							id.push(item.idK);
							name.push(item.name)
						}
					});
				}
				if (this.people.length == 0) {
					this.name_list = "";
				}
				this.$emit("setPeople", {
					name: this.name_list,
					id
				});
				console.log({
					name: this.name_list,
					id
				})
			},
		},
	};
</script>

<style scoped>
	.u-radio{
		padding: 2px 5px;
	}
	.fixed {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100vh;
		overflow: auto;
		z-index: 100;
		background-color: rgba(0, 0, 0, 0.6);

		transition: all 0.25s ease-in-out 0s;
		transform: scale(1, 1);
	}

	.content {
		/* background: #f9fbfe; */
		height: 100%;
	}

	.system {
		width: 91.5%;
		margin: 10px auto;
		color: #000;
	}

	.system>.title {
		line-height: 36px;
		font-size: 16px;
		font-weight: bold;
	}

	.system .add {
		float: right;
		color: #fff;
		background: #307be0;
		width: 70px;
		line-height: 36px;
		font-size: 12px;
		text-align: center;
		border-radius: 4px;
	}

	.system .list {
		border-radius: 4px;
		font-size: 14px;
		margin-top: 15px;
		color: #303133;
		box-shadow: 0 0 2px 2px rgb(0 0 0 / 10%);
	}

	.system>.list:last-child {
		margin-bottom: 40px;
	}

	.system .list>.title {
		background: #d8d8d8;
		line-height: 50px;
		padding: 0 15px;
		height: 50px;
	}

	.system .list>.title>.remove {
		color: red;
		float: right;
	}

	.list>.list-info {
		background: #fff;
		padding-left: 15px;
	}

	.list>.list-info .hr {
		height: 1px;
		background: #d8d8d8;
	}

	.child-system {
		position: fixed;
		left: 0;
		bottom: 0;
		width: 100%;
		background: #fff;
		color: #000;
		font-size: 12px;
		z-index: 100;
		/* height: 50vh;overflow: auto; */
	}

	.child-system>.controller {
		line-height: 40px;
		padding: 0 10px;
		border-bottom: 1px solid #d7d7d7;
		position: relative;
	}

	.child-system>.controller>.quit,
	.child-system>.controller>.ok {
		display: inline-block;
	}

	.child-system>.controller>.reset {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
	}

	.child-system>.controller>.ok {
		float: right;
		line-height: 40px;
	}

	.system-name {
		line-height: 46px;
		border-bottom: 1px solid #d7d7d7;
		height: 46px;
		color: #2979ff;
		font-size: 14px;
	}

	.system-name>.nowrap {
		width: 96%;
		white-space: nowrap;
		overflow-x: scroll;
		margin: 0 auto;
	}

	.system-name>.nowrap>.name {
		display: inline-block;
	}

	.item-list {
		height: 40vh;
		overflow: auto;
		padding: 0 15px;
	}

	.item {
		line-height: 37px;
		border-bottom: 1px solid #d7d7d7;
		padding: 0 15px;
	}

	.push {
		position: fixed;
		bottom: 0;
		left: 0;
		color: #fff;
		background: #307be0;
		width: 100%;
		line-height: 36px;
		font-size: 12px;
		text-align: center;
	}

	.empty {
		padding: 30px;
		text-align: center;
		font-size: 16px;
	}
</style>

<style>
	.u-checkbox {
		line-height: 37px;
	}
</style>